import { Modal, Tabs, Form, Row, Col, Input, message, InputNumber } from 'antd';
import { useState } from 'react';

import commonService from '@/api/services/commonService';

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 18 },
  },
};
export function WithdrawModal({ show, onClose }: any) {
  const [form] = Form.useForm();
  const [tab, setTab] = useState('bank');

  const handleOk = async () => {
    form.validateFields().then((params) => {
      params.money *= 100;
      commonService.postCustomApi('/member/withdraw/submit', params).then(() => {
        message.success('申请已提交！');
        onClose();
      });
    });
  };
  return (
    <Modal title="提现" open={show} onCancel={onClose} okText="去提现" onOk={handleOk} centered>
      <Tabs
        activeKey={tab}
        onChange={(key) => setTab(key)}
        items={[
          { label: '提现到银行', key: 'bank' },
          { label: '提现到支付宝', key: 'alipay' },
        ]}
      />
      <Form name="withdraw" size="large" form={form} {...formItemLayout}>
        <Row>
          {tab === 'bank' ? (
            <Col span={24}>
              <Form.Item
                label="银行"
                name="bankName"
                rules={[{ required: true, whitespace: true, message: '请输入银行' }]}
              >
                <Input />
              </Form.Item>
              <Form.Item
                label="卡号"
                name="cardNumber"
                rules={[{ required: true, whitespace: true, message: '请输入卡号' }]}
              >
                <Input />
              </Form.Item>
              <Form.Item
                label="开户姓名"
                name="accountName"
                rules={[{ required: true, whitespace: true, message: '请输入卡号' }]}
              >
                <Input />
              </Form.Item>
              <Form.Item
                label="提现金额"
                name="money"
                rules={[{ required: true, message: '请输入金额' }]}
              >
                <InputNumber style={{ width: '100%' }} />
              </Form.Item>
            </Col>
          ) : (
            <Col span={24}>
              <Form.Item
                label="支付宝账号"
                name="cardNumber"
                rules={[{ required: true, whitespace: true, message: '请输入账号' }]}
              >
                <Input />
              </Form.Item>
              <Form.Item
                label="支付宝姓名"
                name="accountName"
                rules={[{ required: true, whitespace: true, message: '请输入姓名' }]}
              >
                <Input />
              </Form.Item>
              <Form.Item
                label="提现金额"
                name="money"
                rules={[{ required: true, message: '请输入金额' }]}
              >
                <InputNumber style={{ width: '100%' }} />
              </Form.Item>
            </Col>
          )}
        </Row>
      </Form>
    </Modal>
  );
}
